<template>
    <!-- #ifndef MP -->
    <div class="member">
        <Nav :isBack="false" :showRight="false"></Nav>
        <view class="banner">
            <view class="left">
                <view class="header">
                    <image src="../../static/images/user.png" mode="widthFix" />
                </view>
                <view class="userinfo">
                    <view class="username">匿名用户</view>
                    <view class="isvip">可用次数：{{ getUseCount }}</view>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="title">开通会员</view>
            <view class="prices">
                <view
                    class="item"
                    @click="select = 0"
                    :class="select === 0 ? 'active' : ''"
                >
                    <view class="top">新用户专享</view>
                    <view class="context">
                        <view class="name">100次</view>
                        <view class="price">
                            <text class="now">¥9.9</text>
                            <text class="before">¥99</text>
                        </view>
                        <!-- <view class="limit">0.01元/月</view> -->
                    </view>
                </view>
                <view
                    class="item"
                    @click="select = 1"
                    :class="select === 1 ? 'active' : ''"
                >
                    <view class="top">新用户专享</view>
                    <view class="context">
                        <view class="name">1000次</view>
                        <view class="price">
                            <text class="now">¥29.9</text>
                            <text class="before">¥999</text>
                        </view>
                        <!-- <view class="limit">0.01元/月</view> -->
                    </view>
                </view>
                <view
                    class="item"
                    @click="select = 2"
                    :class="select === 2 ? 'active' : ''"
                >
                    <view class="top">新用户专享</view>
                    <view class="context">
                        <view class="name">5000次</view>
                        <view class="price">
                            <text class="now">¥49.9</text>
                            <text class="before">¥4999</text>
                        </view>
                        <!-- <view class="limit">0.01元/月</view> -->
                    </view>
                </view>
            </view>
            <!-- <view class="title" style="margin-top: 34rpx">会员特权</view> -->
        </view>
        <view class="pay">
            <view class="mode">
                <view class="title">支付方式</view>
                <view class="item" @click="payMode = 0">
                    <view class="left">
                        <view class="icon">
                            <image
                                src="../../static/images/wechat (2).png"
                                mode="scaleToFill"
                            />
                        </view>
                        <view class="name">微信支付</view>
                    </view>
                    <view class="select">
                        <image
                            v-if="payMode === 0"
                            src="../../static/images/selected.png"
                            mode="scaleToFill"
                        />
                        <image
                            v-else
                            src="../../static/images/select.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="item" @click="payMode = 1">
                    <view class="left">
                        <view class="icon">
                            <image
                                src="../../static/images/aili (2).png"
                                mode="scaleToFill"
                            />
                        </view>
                        <view class="name">支付宝支付</view>
                    </view>
                    <view class="select">
                        <image
                            v-if="payMode === 1"
                            src="../../static/images/selected.png"
                            mode="scaleToFill"
                        />
                        <image
                            v-else
                            src="../../static/images/select.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
            </view>
            <button @click="pay()" class="buy" hoverClass="hover">
                立即购买
            </button>
        </view>
    </div>
    <!-- #endif -->
</template>

<script>
// #ifndef MP
import { mapGetters, mapMutations } from "vuex";
import { getInfoFromCenter, management } from "../../tools/update";
let base = "";
// #ifdef H5
base = "/cssnmi";
// #endif
// #ifdef APP-PLUS
base = "https://campaign.snmi.cn/cssnmi";
// #endif
export default {
    data: () => ({
        payMode: 0,
        select: 0,
        //
        channel: "com.sfsm.unisdk.photorepair",
    }),
    methods: {
        updateData() {
            switch (this.select) {
                case 0:
                    this.updateCount(100);
                    break;
                case 1:
                    this.updateCount(1000);
                    break;
                case 2:
                    this.updateCount(5000);
                    break;
            }
            setTimeout(() => {
                uni.removeStorageSync("order_key");
            }, 200);
        },
        query() {
            // #ifdef APP-PLUS 
            uni.onNativeEventReceive(async (event, data) => {
							console.log(222);
                if (event === "queryOrder") {
                    let id = uni.getStorageSync("order_key");
                    if (id.length === 0) {
                        return;
                    }
                    if (data == 0) {
                        this.updateData();
                        uni.showToast({
                            title: "支付成功",
                            icon: "success",
                            mask: true,
                        });
                        management(["支付成功"]);
                    } else {
                        uni.showToast({
                            title: "支付失败",
                            icon: "success",
                            mask: true,
                        });
                    }
                }
                /* if (event === "backFromPayment") {
                    let id = uni.getStorageSync("order_key");
                    if (id.length === 0) {
                        return;
                    }
                    uni.request({
                        url: base + "/pay/QueryTran?transno" + id,
                        sslVerify: false,
                        success: ({ data, statusCode, header }) => {
                            if (data["Detail"]["PayDT"]) {
                                this.updateData();
                                uni.showToast({
                                    title: "支付成功",
                                    icon: "success",
                                    mask: true,
                                });
                            } else {
                                uni.showToast({
                                    title: "支付失败",
                                    icon: "success",
                                    mask: true,
                                });
                            }
                        },
                        fail: error => {
                            uni.showToast({
                                title: "支付失败",
                                icon: "success",
                                mask: true,
                            });
                        },
                    });
                } */
            });
            // #endif
        },
        async getToken() {
            let token = uni.getStorageSync("token");
			console.log(token);
            if (token.length === 0) {
                let user = await getInfoFromCenter({
                    appId: plus.runtime.appid,
                });
                uni.request({
                    url: "https://cs.snmi.cn/user/deviceRegist",
                    method: "POST",
                    data: {
                        pkgname: "com.h5huangdaxian",
                        deviceId: user.devicedId,
                        appVersion: "1.0.0",
                    },
                    sslVerify: false,
                    success: res => {
                        if (res.data.Code === 200) {
                            uni.setStorage({
                                key: "token",
                                data: res.data.Token,
                                success: result => {},
                            });
                        } else {
                            uni.showToast({
                                title: "用户注册失败",
                                icon: "none",
                                mask: true,
                            });
                        }
                    },
                    fail: error => {

					},
                });
            }
        },
        pay() {
            const channel = this.channel;
            uni.request({
                url: base + "/pay/getprices",
                method: "POST",
                data: {
                    channel: channel,
                    appVersion: "1.0.0",
                    pkgname: channel,
                },
                sslVerify: false,
                success: async res => {
                    const goods = res.data["Detail"][this.select];
                    // 宿主app内
                    // 下单 支付宝
                    let token = uni.getStorageSync("token");
					console.log(token);
                    if (this.payMode === 1) {
                        management(["下单", "支付宝"]);
                        uni.request({
                            // #ifdef APP-PLUS
                            url: base + "/pay/aliwapvippay",
                            // #endif
                            method: "POST",
                            data: {
                                token: token,
                                goodsName: goods.goodsName,
                                goodsId: goods.goodsId,
                                pkgname: "cn.snmi.pay",
                                tradetype: "h5",
                                money: goods["priceNow"],
                            },
                            sslVerify: false,
                            success: res => {
                                if (res.data.Code === 200) {
                                    let orderID = res.data["TradeNo"];
                                    uni.setStorage({
                                        key: "order_key",
                                        data: orderID,
                                    });
                                    let url =
                                        "https://pay.snmi.cn/alipay.html?orderid=" +
                                        orderID;
                                    uni.sendNativeEvent(
                                        "exitapp",
                                        { appId: plus.runtime.appid },
                                        ret => {}
                                    );
                                    uni.sendNativeEvent(
                                        "getPayByH5",
                                        { url, from: "ali", orderID: orderID },
                                        ret => {}
                                    );
                                }
                            },
                            fail: e => {
                                uni.showToast({
                                    title: "",
                                    icon: "请求支付失败",
                                    mask: true,
                                });
                            },
                        });
                    }
                    // 微信
                    if (this.payMode === 0) {
                        management(["下单", "微信"]);
                        uni.request({
                            url: base + "/pay/wxvippay",
                            method: "POST",
                            data: {
                                token: token,
                                goodsName: goods.goodsName,
                                goodsId: goods.goodsId,
                                pkgname: "com.smsf.watermarkcamera",
                                // #ifdef APP-PLUS
                                // pkgname: "com.snmitool.freenote",
                                // #endif
                                money: goods["priceNow"],
                                tradetype: "h5",
                            },
                            sslVerify: false,
                            success: res => {
                                if (res.data.Code === 200) {
                                    let orderID = res.data["TradeNo"];
									console.log(orderID);
                                    uni.setStorage({
                                        key: "order_key",
                                        data: orderID,
                                    });
                                    let { mweb_url } = JSON.parse(
                                        res.data.Detail
                                    );
                                    let url =
                                        mweb_url +
                                        "&redirect_url=https%3A%2F%2Fsnmi.cn%2Forder%3Forderid%3D" +
                                        orderID;
                                    uni.sendNativeEvent(
                                        "exitapp",
                                        { appId: plus.runtime.appid },
                                        ret => {}
                                    );
                                    uni.sendNativeEvent(
                                        "getPayByH5",
                                        { url, from: "wx", orderID: orderID },
                                        ret => {}
                                    );
                                }
                            },
                            fail: e => {
                                console.log(e);
                            },
                        });
                    }
                },
                fail: e => {
                    console.log(e, "请求失败");
                },
            });
        },
        ...mapMutations(["updateCount", "initCount"]),
    },
    onShow() {},
    onLoad() {
        this.query();
        // #ifdef APP-PLUS
		console.log(plus.runtime.appid);
        this.getToken();
		
        // #endif
        // #ifdef APP-PLUS
        management(["进入", "会员页面"]);
        // #endif
    },
    computed: {
        ...mapGetters(["getUseCount"]),
    },
    onBackPress() {
        // #ifdef APP-PLUS
        uni.sendNativeEvent(
            "exitapp",
            { appId: plus.runtime.appid },
            ret => {}
        );
        plus.runtime.quit();
        // #endif
        return true;
    },
    onReady() {
        // #ifdef MP-QQ
        qq.showShareMenu({
            showShareItems: ["qq", "qzone", "wechatFriends", "wechatMoment"],
        });
        // #endif
    },
};
// #endif
</script>

<style lang="scss" scoped>
.hover {
    transition: all 0.5s;
    opacity: 0.5;
}
.member {
    .banner {
        padding: 82rpx 30rpx;
        background-image: url("../../static/images/bg.png");
        background-size: 100% 100%;
        .left {
            display: flex;
            align-items: center;
            .header {
                image {
                    width: 110rpx;
                }
            }
            .userinfo {
                margin-left: 19rpx;
                .username {
                    font-size: 30rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 45rpx;
                }
                .isvip {
                    margin-top: 12rpx;
                    font-size: 24rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 36rpx;
                }
            }
        }
    }
    .title {
        font-size: 30rpx;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        line-height: 45rpx;
    }
    .main {
        padding: 37rpx 30rpx 28rpx;
        background: #ffffff;
        .prices {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 36rpx;
            .item {
                width: 206rpx;
                height: 245rpx;
                background: #f7f7f7;
                border-radius: 5rpx;
                box-sizing: border-box;
                .top {
                    font-size: 24rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 51rpx;
                    background: linear-gradient(
                        180deg,
                        #eecf9a 0%,
                        #dcb468 100%
                    );
                    border-radius: 5rpx 5rpx 0px 0px;
                }
                .context {
                    padding: 28rpx 0;
                    text-align: center;
                    .name {
                        font-size: 28rpx;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #000000;
                        // line-height: 42rpx;
                    }
                    .price {
                        margin: 12rpx 0;
                        .now {
                            font-size: 40rpx;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #f75162;
                            // line-height: 60rpx;
                        }
                        .before {
                            margin-left: 6rpx;
                            font-size: 20rpx;
                            font-family: SourceHanSansCN-Regular,
                                SourceHanSansCN;
                            font-weight: 400;
                            color: #b7b7b7;
                            text-decoration: line-through;
                            // line-height: 30rpx;
                        }
                    }
                    .limit {
                        font-size: 20rpx;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #ddb262;
                        // line-height: 30rpx;
                    }
                }
            }
            .active {
                background: #fcf4e9;
                border: 2px solid #ddb262;
            }
        }
    }
    .pay {
        /* position: fixed;
        width: 100%;
        bottom: 0; */
        /* #ifdef H5 */
        // bottom: 50px;
        /* #endif */
        background: #ffffff;
        .mode {
            padding: 34rpx 30rpx;
            .title {
                margin-bottom: 24rpx;
            }
            .item {
                padding: 28rpx 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left {
                    display: flex;
                    align-items: center;
                    .icon {
                        margin-right: 21rpx;
                        width: 36rpx;
                        height: 36rpx;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .select {
                    image {
                        width: 48rpx;
                        height: 48rpx;
                    }
                }
            }
            .item:nth-of-type(1) {
                border-bottom: 1rpx solid #999;
            }
        }
        .buy {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100rpx;
            background: #ddb262;
            font-size: 28rpx;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #000000;
        }
    }
}
</style>
